import React,{ Component } from "react"
import cationimg from "../../images/cationimg.jpg"
import "./index.css"

import {getCation} from "../../api/cation";

class Index extends Component{
	constructor(props){
        super(props);
        this.state = {
            data:[],
            nowIndex:0
        }
    }

    componentDidMount(){
        getCation().then(res=>{
            this.setState({
                data:res.data.data
            })
        })
    }


    checkHanld(nowIndex){
        this.setState({nowIndex})
    }


  render(){
    let {data,nowIndex} = this.state;
		return(
            <div className="cation">
                <div className="navleft">
                    {data.map((item,index)=>{
                         return <span className={index === nowIndex ? "active":""} 
                                      key={item.type}
                                      onClick={this.checkHanld.bind(this,index)}>
                                    {item.title}
                                </span>
                    })}
                </div>
                <div className="content">
                     <img src={cationimg} alt="" className="bigimg"/>
                     <div className="list">
                        {
                          data.map((item,index)=>{
                            return <ul key={item.type} style={{"display":index === nowIndex ? "block":"none"}}>
                                        {
                                            item.list.map((item,index)=>{
                                                return  <li key={index} 
                                                            onClick={()=>{
                                                               this.props.history.push("/shopstore/"+item.id)
                                                            }}>
                                                           <img src={item.imgurl} alt=""/>
                                                           <span>{item.name}</span>
                                                        </li>
                                            })
                                        }
                                    </ul>
                          })
                        }
                        
                     </div> 
                </div>
            </div>
		)
	}
}


export default Index